<template>
  <div>
    <div class="content-box">
      <img src="/contact.png" alt="" class="bg-img" />
      <div class="content d-flex">
        <div class="d-none d-sm-flex  content-left align-self-end mb-7">
          <span class="white--text" :style="`font-size: ${this.$i18n.locale == 'zh' ? 23 : 18}px`"
            >{{$t('descOne')}}<span class="black--text">{{$t('descTwo')}}</span>{{$t('descThree')}}</span
          >
        </div>
        <div class="content-right bg-white mr-md-10 px-md-8">
          <div class="content-contact-box text-left">
            <p>{{$t('trustUs')}}</p>
            <v-row>
              <v-col cols="12" sm="12" md="6">
                <span class="label-text">{{$t('tel')}}：</span>
                <span>{{ info.mobile }}</span>
              </v-col>
              <v-col cols="12" sm="12" md="6">
                <span class="label-text">{{$t('wechat')}}：</span>
                <span>{{ info.wx }}</span>
              </v-col>
              <v-col cols="12" sm="12" md="6">
                <span class="label-text">{{$t('email')}}：</span>
                <span>{{ info.email }}</span>
              </v-col>
              <v-col cols="12" sm="12" md="6">
                <span class="label-text">{{$t('address')}}：</span>
                <span>{{ info.address }}</span>
              </v-col>
            </v-row>
          </div>
          <!-- <b-map :center="center"></b-map> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BMap from '~/components/BMap.vue'
export default {
   components: {
    BMap
  },
  async asyncData({ store,$axios }) {
    const data = await $axios.$post('company/index', {language: store.state.locale})
    const result = JSON.parse(data).data
    const center = {lng: result.lng, lat: result.lat}
    return {
      info: result,
      center
    }
  },
   watch: {
    '$store.state.locale'() {
      this.getData()
    },
  },
  methods: {
    async getData() {
      const data = await this.$axios.$post('company/index', {language: localStorage.getItem('lang')})
      this.info = JSON.parse(data).data
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  position: relative;
  .bg-img {
    width: 100%;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .content-left {
      flex: 1;
      background: rgba($color: #eee, $alpha: 0.5);
      font-size: 23px;
      padding: 10px 0 10px 24px;
    }
    .bg-white {
      background: rgba(255, 255, 255, 0.8);
    }
    .content-right {
      max-width: 570px;
      position: relative;
      color: #333;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 20px;

      .content-text-box {
        font-size: 13px;
        margin-bottom: 40px;
      }
      .content-contact-box {
        width: 100%;
        p {
          &:first-child {
            font-size: 14px;
          }
        }
        span {
          font-size: 12px;
        }

        .label-text {
          color: $blue198;
        }
      }
    }
  }
}

#map {
  width: 100%;
  height: 300px;
}

@media screen and (max-width: 765px) {
  .content {
    position: relative !important;
  }
}
</style>
